<template>
  <div id="tt">
    <div class="boxCen">
      <div id="clipArea" class="file-clip"></div>
      <div class="file">
        <div class="file-btn">点击上传图片</div>
        <input type="file" class="service-file" id="file">
      </div>
      <div class="file-btn" id="clipBtn" @click="clip()">裁剪图片</div>
      <div class="file-btn" id="rotaBtn" @click="rotate">选转</div>
      <div class="file-btn" @click="resize(true)">放大</div>
      <div class="file-btn" @click="resize(false)">缩小</div>
      <div class="red">（鼠标滚轮为缩放，每次双击则顺时针旋转90度）</div>
    </div>
    <div class="spacer"></div>
    <div class="col-md-6 icon-box icon">
      <img :src="message == null ? defaultImg : message" class="img-circle" alt="icon">
      <p>当前头像</p>
    </div>
    <div class="col-md-6 icon-box">
      <img :src="img == null ? defaultImg : img" alt="头像预览" class="img-circle">
      <p>头像预览</p>
    </div>
    <div class="clearfix"></div>
    <div class="btn-box">
      <div class="btn btn-primary" @click="setAvatar">更改头像</div>
    </div>
    <div class="clearfix spacer"></div>
  </div>
</template>
<script>
import PhotoClip from 'photoclip'
import {showMessage} from '../../js/my-plugin'
export default {
  name: 'Icon',
  inject: ['reload'],
  props: ['message'],
  data () {
    return {
      defaultImg: require('../../assets/img/user/akari.jpg'),
      photoClip: '',
      // 旋转角度
      angle: 0,
      // 缩放
      zoom: 1,
      img: null
    }
  },
  mounted () {
    this.init()
  },
  methods: {
    init () {
      this.photoClip = new PhotoClip('#clipArea', {
        size: [200, 200],
        file: '#file',
        outputSize: [200, 200],
        loadStart: function () {
          console.log('照片读取中')
        },
        loadComplete: function () {
          console.log('照片读取完成')
        }
      })
    },
    setAvatar () {
      if (this.img == null) {
        showMessage('您还没有上传头像', 0)
        return
      }
      const data = {
        avatar: this.img,
        _method: 'put'
      }
      this.$axios({
        method: 'post',
        url: '/api/user/avatar',
        data: this.$qs.stringify(data),
        headers: {Authorization: this.$store.state.authorization}
      })
        .then((res) => {
          console.log(res.data)
          if (res.data.code === 200) {
            showMessage(res.data.msg, 1)
            this.reload()
          } else if (res.data.code === 204) {
            // 更新token
            this.authorization = res.data.data
            window.localStorage.setItem('authorization', res.data.data)
            this.reload()
          } else {
            showMessage(res.data.msg, 0)
          }
        })
        .catch((error) => {
          console.log(error)
          showMessage('登陆失败，无法连接服务器', 0)
        })
    },
    rotate () {
      // 旋转
      this.angle += 90
      this.photoClip.rotate(this.angle)
    },
    resize (val) {
      // 缩放
      if (val) {
        if (this.zoom >= 1) {
          return
        }
        this.zoom += 0.1
      } else {
        if (this.zoom <= 0) {
          return
        }
        this.zoom -= 0.1
      }
      this.photoClip.scale(this.zoom)
    },
    clip () {
      this.img = this.photoClip.clip()
    }
  }
}
</script>

<style scoped>
  .boxCen {
    text-align: center;
  }
  .file-clip {
    width: 100%;
    height: 300px;
    background: #666;
    display: inline-block;
    vertical-align: bottom;
  }
  .file {
    position: relative;
    display: inline-block;
    overflow: hidden;
    vertical-align: middle;
    margin: 20px 20px 0 0;
  }
  .boxCen .file {
    vertical-align: bottom;
  }
  .service-file {
    position: absolute;
    left: 0;
    right: 0;
    top: 0;
    opacity: 0;
    bottom: 0;
    cursor: pointer;
  }
  .file-btn {
    margin: 5px 10px;
    padding: 0 10px;
    border: 1px solid #606060;
    cursor:pointer;
    display: inline-block;
  }
  img {
    width: 200px;
    height: 200px;
    border: 3px solid #000;
  }
  .icon-box {
    text-align: center;
  }
  .icon {
    border-right: 4px solid #00a0e9;
  }
  p {
    margin-top: 20px;
  }
  .btn-box {
    margin-top: 20px;
    text-align: center;
  }
</style>
